<template>
  <div class="common-form">
    <el-button
      type="primary"
      @click="add"
      style="margin-top: 0"
      >+ 新增</el-button
    >
    <el-dialog :title="operateType === 'add' ? '创建菜品内容' : '菜品更新'" :visible.sync="isShow">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item
          label="菜品分类"
          :label-width="formLabelWidth"
          prop="classification"
        >
          <el-select v-model="ruleForm.classification" placeholder="" style="width:100%">
            <el-option
              v-for="item in classification"
              :key="item.lable"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品名" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品上架状态 " :label-width="formLabelWidth">
          <el-select v-model="ruleForm.region" placeholder="" style="width:100%">
            <el-option label="上架" value="shangjia"></el-option>
            <el-option label="下架" value="xiajia"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销量" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.sale" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >创 建</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CommonForm",
  props: {},
  data() {
    return {
      isShow: false,
      formLabelWidth: "120px",
      operateType: 'add',
      isShow: false,
      classification: [
        {
          label: "新品推荐",
          value: "recommend",
        },
        {
          label: "店长推荐",
          value: "dianzhang",
        },
        {
          label: "主食",
          value: "zhushi",
        },
        {
          label: "经典套餐",
          value: "taocan",
        },
        {
          label: "面食",
          value: "mianshi",
        },
        {
          label: "粥品汤类",
          value: "tanglei",
        },
        {
          label: "酒水饮料",
          value: "yinliao",
        },
      ],
      ruleForm: {
        classification: "",
        name: "",
        price: "",
        region: "",
        sale: "",
      },
      rules: {
        classification: [
          { required: true, message: "请选择菜品分类", trigger: "change" },
        ],
      },
    };
  },

  methods: {
    add(){
      this.isShow = true
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
